<template>
  <q-page class="q-pa-md">
    <q-btn class="float-right" color="primary" icon="arrow_back" outline title="返回" to="/" />
    <div class="q-pb-md text-h5">无单移库</div>
    <!--错误提示-->
    <q-banner class="text-white bg-red q-mb-md" dense inline-actions v-if="serverErrorMessage">
      {{ serverErrorMessage }}
      <template v-slot:action>
        <q-btn @click="serverErrorMessage = ''" dense flat icon="close" size="sm" />
      </template>
    </q-banner>
    <div class="row q-pt-sm q-col-gutter-sm" style="margin: -8px">
      <div class="row q-col-gutter-sm col-12">
        <div class="col-12">
          <q-icon color="red" name="fas fa-asterisk" size="10px" />
          <span>仓库</span>
          <simple-filter-select :auto-select-first-option="$d.autoSelectFirstWh" :options="$d.whDropdownList" option-label="whName"
            option-value="whId" v-model="$d.form.whId" :use-filter="false" :error="v$.whId.$error" :error-message="e$(v$.whId.$errors)"/>
        </div>
      </div>
      <div class="row q-col-gutter-sm col-12">
        <div class="col-12">
          <q-icon color="red" name="fas fa-asterisk" size="10px" />
          <span>来源栈板(箱号)</span>
          <easy-input v-model="$d.form.fLpn" @focus="fx.ui.select" :error="v$.fLpn.$error" :error-message="e$(v$.fLpn.$errors)"
            @keyup.enter="getFlocsByNoDoc" :ref="fLpn"/>
        </div>
        <div class="col-12">
          <q-icon color="red" name="fas fa-asterisk" size="10px" />
          <span>来源储位</span>
          <simple-filter-select
            option-label="loc" option-value="loc" :options="$d.locDropdownList" dense
            :error="v$.fLoc.$error" :error-message="e$(v$.fLoc.$errors)" no-error-icon v-model="$d.form.fLoc"
            :auto-select-first-option="$d.autoSelectFirstWh" :use-filter="false" ref="fLoc"  />
        </div>
      </div>
      <div class="row q-col-gutter-sm col-12">
        <div class="col-12">
          <q-icon color="red" name="fas fa-asterisk" size="10px" />
          <span>批号或外部批号</span>
          <easy-input v-model="$d.form.lotOrVLot" @focus="fx.ui.select" :error="v$.lotOrVLot.$error" :ref="el=>focusHelper.regRef(el, 2)"
            :error-message="e$(v$.lotOrVLot.$errors)" @keyup.enter="getAvailableQtyByNoDoc" :loading="getAvailableQtyByNoDocState"/>
        </div>
        <div class="col-12">
          <q-icon color="red" name="fas fa-asterisk" size="10px" />
          <span>移库数量</span><span class="text-red">({{$d.qtyAvailable}})</span>
          <easy-input v-model="$d.form.qty" @focus="fx.ui.select" :error="v$.qty.$error" :error-message="e$(v$.qty.$errors)"
            :ref="el=>focusHelper.regRef(el, 3)" @keyup.enter="focusHelper.onEntered(3)"/>
        </div>
      </div>
      <div class="row q-col-gutter-sm col-12">
        <div class="col-12">
          <q-icon color="red" name="fas fa-asterisk" size="10px" />
          <span>目的储位</span>
          <easy-input v-model="$d.form.tLoc" @focus="fx.ui.select" :error="v$.tLoc.$error" :error-message="e$(v$.tLoc.$errors)"
            :ref="el=>focusHelper.regRef(el, 4)" @keyup.enter="focusHelper.onEntered(4)"/>
        </div>
        <div class="col-12">
          <q-icon color="red" name="fas fa-asterisk" size="10px" />
          <span>目的栈板(箱号)</span>
          <easy-input v-model="$d.form.tLpn" @focus="fx.ui.select" :error="v$.tLpn.$error" :error-message="e$(v$.tLpn.$errors)"
            :ref="el=>focusHelper.regRef(el, 5)" @keyup.enter="focusHelper.onEntered(5)"/>
        </div>
        <div class="col-12 q-mt-md">
          <div style="font-weight: bold; font-size: 16px">建议目的栈板</div>
          <table class="simple-static-table" style="width: 100%">
            <tr>
              <th>储位</th>
              <th>栈板</th>
              <th>数量</th>
            </tr>
            <tr v-for="(v, i) in $d.adviceLpnsInfo" :key="i">
              <td>{{v.loc}}</td>
              <td>{{v.lpn}}</td>
              <td>{{v.qtyAll}}</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="row q-col-gutter-sm col-12">
        <div class="col-12">
          <q-btn class="full-width" color="primary" icon-right="fas fa-sign-in-alt" label="确定移库"
            @click="doInvMoveWithoutNote" :loading="submittingState" />
        </div>
      </div>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'MoveWithoutNoteStd'
}
</script>

<script lang="ts" setup>

import {computed, reactive, ref, nextTick} from 'vue'
import {WmWhLite} from '@njt/foundation/helper/dropdownlist.d'
import useVuelidate from '@vuelidate/core'
import {playSuccessSound, playErrorSound} from '@njt/wms/helper/audio'
import {QInput} from 'quasar'
import { useFocusNextHelper } from '@njt/foundation/hooks/focusHelper'

let serverErrorMessage = ref('')
let getAvailableQtyByNoDocState = ref(false)
let submittingState = ref(false)

const $d = reactive({
  adviceLpnsInfo: [] as Record<string, string>[],
  locDropdownList: [] as string[],
  whDropdownList: [] as WmWhLite[],
  pageName: '/wms/work/move-without-note',
  autoSelectFirstWh: false,
  form: {
    //仓库ID
    whId: null as number | null,
    //来源储位
    fLoc: null as string | null,
    //来源栈板
    fLpn: null,
    //目的储位
    tLoc: null,
    //目的栈板
    tLpn: null,
    //批号
    lotOrVLot: null,
    //移库数量
    qty: null as number | null
  },
  qtyAvailable: null as number | null
})

const validators = $f.validators
const rules = {
  whId: {
    required: validators.required
  },
  fLoc: {
    required: validators.required
  },
  fLpn: {
    required: validators.required
  },
  lotOrVLot: {
    required: validators.required
  },
  qty: {
    required: validators.required,
    int32: validators.int32,
    greaterThan: validators.greaterThan(0)
  },
  tLoc: {
    required: validators.required
  },
  tLpn: {
    required: validators.required
  }
}
const v$ = useVuelidate(rules, computed(() => $d.form), {$autoDirty: true})

const getAvailableQtyByNoDoc = function () {
  serverErrorMessage.value = ''
  if ($d.form.whId && $d.form.fLoc && $d.form.fLpn && $d.form.lotOrVLot) {
    $d.adviceLpnsInfo = []
    getAvailableQtyByNoDocState.value = true
    let params = {
      whId: $d.form.whId,
      fLoc: $d.form.fLoc,
      fLpn: $d.form.fLpn,
      lotOrVLot: $d.form.lotOrVLot
    }
    $f.axios
      .get('/wms/inv/inventory/get-available-qty-by-no-doc', {params:params})
      .then((resp) => {
        $d.qtyAvailable = resp.data.availableQtyForMove
        $d.adviceLpnsInfo = resp.data.adviceLpnsInfo
        focusHelper.onEntered(2)
      })
      .catch((err) => {
        serverErrorMessage.value = $f.getAxiosErrMsg(err)
      })
      .finally(() => {
        getAvailableQtyByNoDocState.value = false
      })
  }
}

const doInvMoveWithoutNote = function () {
  serverErrorMessage.value = ''
  void v$.value.$validate()
    .then((valRes) => {
      if (valRes) {
        submittingState.value = true
        $f.axios
          .post('/wms/inv/inventory/do-inv-move-by-pda',$d.form)
          .then(() => {
            window.localStorage.setItem('wh_id:' + $d.pageName, String($d.form.whId))
            $d.adviceLpnsInfo = []
            $d.form.fLoc = null
            $d.form.fLpn = null
            $d.form.tLoc = null
            $d.form.tLpn = null
            $d.form.lotOrVLot = null
            $d.form.qty = null
            v$.value.$reset()
            $f.ui.showNotifySucceeded('无单移库成功')
            playSuccessSound()
            $d.qtyAvailable = null
          })
          .catch((err) => {
            serverErrorMessage.value = $f.getAxiosErrMsg(err)
          })
          .finally(() => {
            submittingState.value = false
            void nextTick(() => {
              fLpn.value && fLpn.value.focus()
            })
          })
      } else {
        playErrorSound()
      }
    })
}

const getFlocsByNoDoc = () => {
  if ($d.form.whId && $d.form.fLpn) {
    $d.adviceLpnsInfo = []
    let params = {
      whId: $d.form.whId,
      fLpn: $d.form.fLpn,
    }
    $f.axios.get('/wms/inv/inventory/get-flocs-by-no-doc', {params})
      .then((resp) => {
        $d.locDropdownList = resp.data
        if ($d.locDropdownList.length === 1) {
          $d.form.fLoc = $d.locDropdownList[0].loc
          focusHelper.onEntered(1)
        } else {
          $d.form.fLoc = null
        }
      })
      .catch((err) => {
        $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
      })
  }
}

void $f.lst.getWmWhSimpleList()
  .then((resp) => {
    $d.whDropdownList = resp
  })
// 查找页面存储
let whId = window.localStorage.getItem('wh_id:' + $d.pageName)
if (whId) {
  $d.form.whId = parseInt(whId)
} else {
  $d.autoSelectFirstWh = true
}

const fLoc = ref<QInput | null>(null)
const fLpn = ref<QInput | null>(null)
const fx = $f
const e$ = $f.getFieldErrStr
const focusHelper = useFocusNextHelper()
focusHelper.regRef(fLpn, 1)
</script>

<style scoped>

</style>
